<script setup>
let obj = [
    {
        imge: "/src/views/tb/imgs/书4.jpg",
    },
    {
        imge: "/src/views/tb/imgs/书6.jpg",
    },
    {
        imge: "/src/views/tb/imgs/书10.jpg",
    },
    {
        imge: "/src/views/tb/imgs/书1.jpg",
    }

]
</script>

<template>
    <div>
        <h2>WeKnow猜猜你想看什么</h2>
        <div class="caiyicai">豆瓣猜你可能感兴趣的新书 · · · · · · </div>
        <div class="box">
            <div v-for="el in obj">
                <img :src="el.imge" alt="">
            </div>
        </div>
        <div class="xingqu">豆瓣猜你的阅读兴趣  · · · · · ·</div>
        <div class="shengmo">什么是WeKnow猜猜你想看什么  · · · · · ·</div>
        <div class="shuoming">这是WeKnow给你的个人推荐。通过每天分析你的读过、想读、在读、评价行为，WeKnow会从海量数据里挑选你会感兴趣的内容给你。</div>
        <router-view></router-view>
    </div>
</template>

<style scoped>
h2 {
    margin-top: 40px;
    margin-left: 250px;
}

.caiyicai {
    margin-top: 20px;
    margin-left: 250px;
}

.box{
    display: flex;
    margin-top: 20px;
    margin-left: 250px;
}
.box img {
    width: 134px;
    height: 178px;
    display: flex;
    margin: 15px;
}

.xingqu{
    margin-top: 20px;
    margin-left: 250px;
}

.shengmo{
    margin-top: 20px;
    margin-left: 1000px;
    font-size: 16px;
}

.shuoming{
    width: 300px;
    height: 168px;
    margin-top: 20px;
    margin-left: 1000px;
    font-size: 10px;
    color: rgb(139, 139, 139);
}
</style>